<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>绑定手机</span></div>
    <div class="bds">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="内容" name="1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="图标">
              <div class="icon_box">
                <span class="hasIcon" v-show="data.icon.url != ''">
                  <i :class="data.icon.url"></i>
                  <i class="icon-abl-close el-icon-error" @click="removeIcon()"></i>
                  <span class="choose_bar" @click="chooseIcon"><i class="txt">替换</i></span>
                </span>
                <span class="noIcon" v-show="data.icon.url == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon"></i></span>
              </div>
            </el-form-item>
            <el-form-item label="图标颜色"><ColorPicker :color="data.icon" :name="'color'"></ColorPicker></el-form-item>
            <el-form-item label="标题文字"><el-input type="text" placeholder="请输入内容" v-model="data.title.text" maxlength="20" show-word-limit></el-input></el-form-item>
            <el-form-item label="按钮颜色"><ColorPicker :color="data.btn" :name="'color'"></ColorPicker></el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容样式" name="2">
          <el-form label-width="100px" size="medium">
            <el-form-item label="标题颜色"><ColorPicker :color="data.title" :name="'color'"></ColorPicker></el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.top"></el-slider>
                <el-input-number v-model="data.padding.top" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.bottom"></el-slider>
                <el-input-number v-model="data.padding.bottom" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.lr"></el-slider>
                <el-input-number v-model="data.padding.lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.radius.top"></el-slider>
                <el-input-number v-model="data.radius.top" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.radius.bottom"></el-slider>
                <el-input-number v-model="data.radius.bottom" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import ColorPicker from '@/components/ColorPicker/index';
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    ColorPicker
  },
  data() {
    return {
      activeNames: ['1', '2', '3']
    };
  },
  methods: {
    getimg(img) {
      this.data.imgbg = img;
    },
    //删除图标
    removeIcon() {
      this.data.icon.url = '';
    },
    //选择图标
    chooseIcon() {
      this.$parent.showiconselcet();
    },

    geticon(data) {
      this.data.icon.url = data;
    }
  }
};
</script>
<style lang="scss" scoped>
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
</style>
